import React from 'react'
import { Form, Input, Button } from 'antd';
import { useNavigate } from 'react-router-dom'
import { signType } from '../../interFace'
import { getRegister } from '../../api'
import { message } from 'antd'
import Style from './index.module.scss'

const Register = () => {
    const navigate = useNavigate()
    // 跳转登录页面
    const toLogin = () => {
        navigate('/login')
    }

    const onFinish = (values: signType) => {
        getRegister(values).then((res: any) => {
            message.success(res.data.msg)
        })
    };



    return (
        <div className={Style.register}>
            <div className={Style.registerBox}>
                <div className={Style.registerLeft}>
                </div>
                <div className={Style.registerRight}>
                    <h2>用户注册</h2>
                    <Form
                        name="basic"
                        onFinish={onFinish}
                    >
                        <Form.Item
                            label="账户"
                            name="username"
                            rules={[{ required: true, message: '请输入你的账户名称!' }]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '请输入你的密码!' }]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="okPassword"
                            label="确认密码"
                            rules={[
                                {
                                    required: true, message: '请再次输入密码!',
                                },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('password') === value) {
                                            return Promise.resolve();
                                        }
                                        return Promise.reject(new Error('俩次输入的密码不一样'));
                                    },
                                }),
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>


                        <Form.Item wrapperCol={{ offset: 8, span: 5 }} >
                            <Button type="primary" htmlType="submit" >
                                注册
                            </Button>

                        </Form.Item>
                    </Form>
                    <h4 onClick={toLogin}>Or 去登陆</h4>
                </div>
            </div>
        </div>
    )
}
export default Register